<template>
	<view class="container">
		<view class="title">休息中</view>
		<view class="subtitle">沃尔玛超市，欢迎您回来～</view>
		<view class="summary">
			<view class="summary-item">
				<text>今日收益</text>
				<text class="value">20.00</text>
			</view>
			<view class="summary-item">
				<text>本月收益</text>
				<text class="value">110.00</text>
			</view>
			
			<view class="summary-item">
				<text>年收益</text>
				<text class="value">21234.00</text>
			</view>
		</view>
		<button class="button-cash">
			<image class="icon" src="/static/收款码.png" style="width: 40rpx;height: 40rpx;margin-right: 10rpx;"></image>
			<text>收款码</text>
		</button>
		<view class="text1">我的业绩</view>
		<view class="chart">
			<ul class="chart-ul">
				<li>销售额</li>
				<li>返利</li>
			</ul>
		</view>
		<view class="echart">图表不会 下拉框写出来没效果</view>
		<view class="echart-bottom">
				<ul class="text2">
					<li>1月</li>
					<li>2月</li>
					<li>3月</li>
					<li>4月</li>
					<li>5月</li>
					<li>6月</li>
				</ul>
		</view>
		<view class="record">
			<ul class="record-text">
				<li>我的收益</li>
				<li>全部记录</li>
			</ul>
		</view>
		<view class="bill-whole" style="margin: 30rpx 30rpx 0;background-color: rgba(255, 255, 255, 1);box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(8, 76, 150, 0.06);">
			<view class="bill1">
				<view class="bill-li1" style="flex: 2;">
					<text style="font-size: 26rpx;color: rgba(0, 0, 0, 0.80);line-height: 40rpx;">订单-87297520848</text>
					<ul style="display: flex;font-size: 18rpx;color: rgba(0, 0, 0, 0.40);">
						<li style="margin-right: 18rpx;">2023-10-03</li>
						<li>18:10:23</li>
					</ul>
				</view>
				<view class="bill-li2" style="flex: 1;text-align: center;">
					<text style="font-size: 26rpx;color: rgba(0, 0, 0, 0.80);line-height: 40rpx;">15000.00</text>
					<view style="font-size: 18rpx;color: rgba(0, 0, 0, 0.40);">交易成功</view>
				</view>
				<view class="bill-li3" style="flex: 1;text-align: right;">
					<text style="font-size: 26rpx;font-weight: bold;line-height: 40rpx;color: rgba(0, 0, 0, 0.80);">150.00</text>
					<view style="font-size: 18rpx;color: rgba(0, 0, 0, 0.40);">收益</view>
				</view>
			</view>
			<view class="bill2">
				<view class="bill-li1" style="flex: 2;">
					<text style="font-size: 26rpx;color: rgba(0, 0, 0, 0.80);line-height: 40rpx;">订单-87297520848</text>
					<ul style="display: flex;font-size: 18rpx;color: rgba(0, 0, 0, 0.40);">
						<li style="margin-right: 18rpx;">2023-10-03</li>
						<li>18:10:23</li>
					</ul>
				</view>
				<view class="bill-li2" style="flex: 1;text-align: center;">
					<text style="font-size: 26rpx;color: rgba(0, 0, 0, 0.80);line-height: 40rpx;">15000.00</text>
					<view style="font-size: 18rpx;color: rgba(0, 0, 0, 0.40);">交易成功</view>
				</view>
				<view class="bill-li3" style="flex: 1;text-align: right;">
					<text style="font-size: 26rpx;font-weight: bold;line-height: 40rpx;color: rgba(0, 0, 0, 0.80);">150.00</text>
					<view style="font-size: 18rpx;color: rgba(0, 0, 0, 0.40);">收益</view>
				</view>
			</view>
			<view class="bill3">
				<view class="bill-li1" style="flex: 2;">
					<text style="font-size: 26rpx;color: rgba(0, 0, 0, 0.80);line-height: 40rpx;">订单-87297520848</text>
					<ul style="display: flex;font-size: 18rpx;color: rgba(0, 0, 0, 0.40);">
						<li style="margin-right: 18rpx;">2023-10-03</li>
						<li>18:10:23</li>
					</ul>
				</view>
				<view class="bill-li2" style="flex: 1;text-align: center;">
					<text style="font-size: 26rpx;color: rgba(0, 0, 0, 0.80);line-height: 40rpx;">15000.00</text>
					<view style="font-size: 18rpx;color: rgba(0, 0, 0, 0.40);">交易成功</view>
				</view>
				<view class="bill-li3" style="flex: 1;text-align: right;">
					<text style="font-size: 26rpx;font-weight: bold;line-height: 40rpx;color: rgba(0, 0, 0, 0.80);">150.00</text>
					<view style="font-size: 18rpx;color: rgba(0, 0, 0, 0.40);">收益</view>
				</view>
			</view>
		</view>
		<!-- <view class="intro">本项目已包含uni ui组件，无需import和注册，可直接使用。在代码区键入字母u，即可通过代码助手列出所有可用组件。光标置于组件名称处按F1，即可查看组件文档。</view>
		<text class="intro">详见：</text>
		<uni-link :href="href" :text="href"></uni-link> -->
	</view>
</template>

<script>
	// export default {
	// 	data() {
	// 		return {
	// 			href: 'https://uniapp.dcloud.io/component/README?id=uniui'
	// 		}
	// 	},
	// 	methods: {

	// 	}
	// }
</script>

<style>
	.container{
		min-height: 100vh;
		padding-top: var(--status-bar-height);
		padding-bottom: 120rpx;
		background: linear-gradient( 180deg, #E3F1FF 0%, #FFFFFF 33%);
	}
	.title{
		font-size: 50rpx;
		font-weight: bold;
		margin-left: 80rpx;
		margin-top: 100rpx;
	}
	.subtitle{
		font-size: 28rpx;
		margin-left: 85rpx;
		color: rgba(0, 0, 0, 0.60);
	}
	.summary{
		display: flex;
		justify-content: space-around;
		/* align-content: space-between; */
		background-color: rgba(0, 122, 255, 1);
		margin: 25rpx 80rpx;
		height: 100rpx;
		/* padding: 10rpx; */
		border-radius: 20rpx;
		padding: 20rpx 100rpx 0 20rpx;
		box-sizing: border-box;
	}
	.summary-item{
		
		/* margin-top: 20rpx; */
		/* text-align: center; */
		display: flex;
		flex-direction: column;
		/* margin-left: 10rpx;
		margin-top: 20rpx; */
		/* float: left;
		margin: 20rpx 50rpx 0; */
		color: rgba(255, 255, 255, 0.70);
		font-size: 20rpx;
		
	}
	.value{
		font-size: 25rpx;
		font-weight: bold;
		color: #fff;
	}
	.button-cash{
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 25rpx;
		font-weight: 600;
		color: rgba(0, 122, 255, 1);
		border-radius: 20rpx;
		margin: 25rpx 80rpx;
		border: 2rpx solid rgba(0, 122, 255, 0.80);
		height: 70rpx;
	}
	.text1{
		font-size: 30rpx;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		margin-left: 80rpx;
		margin-bottom: 12rpx;
	}
	.chart-ul view:nth-child(1){
		color:rgba(0, 122, 255, 1);
	}
	.chart-ul view:nth-child(2){
		color:rgba(255, 108, 2, 1);
	}
	.chart-ul{
		display: flex;
		justify-content: space-around;
		font-size: 28rpx;
		margin-left: 80rpx;
		width: 200rpx;
	}
	.echart{
		text-align: center;
		align-items: center;
		line-height: 200rpx;
		margin: 9rpx 80rpx 7rpx;
		background-color: chartreuse;
		height: 200rpx;
	}
	.echart-bottom{
		margin: 0 60rpx 60rpx 20rpx;
	}
	.text2{
		display: flex;
		justify-content: space-between;
		font-size: 18rpx;
		color: rgba(151, 151, 151, 1);
		margin:0 80rpx 30rpx;
		
	}
	.record{
		margin: 0 0 30rpx 80rpx;
	}
	.record-text{
		display:flex;
		justify-content: space-between;
	}
	.record-text view:nth-child(1){
		color: rgba(0, 0, 0, 1);
		font-size: 30rpx;
		font-weight: bold;
	}
	.record-text view:nth-child(2){
		color: rgba(0, 122, 255, 1);
		font-size: 23rpx;
	}
	.bill1{
		display: flex;
		align-items: center;
		height:120rpx;
		margin: 0 80rpx 10rpx;
		padding: 15rpx 0;
		box-sizing: border-box;
	}
	.bill2{
		display: flex;
		align-items: center;
		height:120rpx;
		margin: 0 80rpx 10rpx;
		padding: 15rpx 0;
		box-sizing: border-box;
	}
	.bill3{
		display: flex;
		align-items: center;
		height:120rpx;
		margin: 0 80rpx 10rpx;
		padding: 15rpx 0;
		box-sizing: border-box;
	}
</style>
